<template>
	<view class="details">
		<u-navbar title=" " :safeAreaInsetTop="true" :placeholder="false" bgColor="rgba(0,0,0,0.0)" :autoBack="true"
			left-icon-color="#fff">
		</u-navbar>
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500">
			<swiper-item>
				<image class="details-bg" :src="info.image" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="box" v-if="info.title">
			<view class="info-box">
				<view class="info-title">
					{{info.title}}
				</view>
				<view class="info-item" style="margin-top: 40rpx;">
					<view class="item-title">
						性别限制
					</view>
					<view class="item-text" v-if="info.gender_limit ==1">
						仅限男士
					</view>
					<view class="item-text" v-if="info.gender_limit ==2">
						仅限女士
					</view>
					<view class="item-text" v-if="info.gender_limit ==3">
						不限性别
					</view>
				</view>

				<view class="info-item">
					<view class="item-title">
						费用情况
					</view>
					<view class="item-text">
						{{info.fee_tip}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						聚会地点
					</view>
					<view class="item-text" style="width: 70%;">
						{{info.address}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						详情说明
					</view>
					<view class="item-text">
						{{info.detail}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						组局说明
					</view>
					<view class="item-text" style="color: red;">
						1.报名需要10钻为报名押金 <br>
						2.组局完成，组局解散，押金原路退回<br>
						3.因个人原因退出组局的不退回押金
					</view>
				</view>
				<view class="title">
					发起人
				</view>
				<view class="people">
					<image
						:src="info.author_avatar.startsWith('http') ? info.author_avatar : 'https://m.lqvvvv.com' + info.author_avatar || 'https://m.lqvvvv.com/assets/static/index/head.png'"
						mode="aspectFill"></image>
					<view class="people-right">
						<view class="right-top">
							<view class="name">
								{{info.author_nickname}}
							</view>
							<!-- <img src="https://m.lqvvvv.com/assets/static/index/female0.png" alt="" /> -->
						</view>
						<!-- <view class="label">
							<view class="label-text">25岁 / 旅游 / 玩游戏</view>
							<view class="position">
								<img src="https://m.lqvvvv.com/images/organize/position.png" alt="" />
								<view>
									距你3.1km
								</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="title">
					已报名
				</view>
				<view class="sign">
					<view class="sign-item" v-for="(item,index) in info.join_list" :key="index">
						<image
							:src="item.avatar.startsWith('http') ? item.avatar : 'https://m.lqvvvv.com' + item.avatar || 'https://m.lqvvvv.com/assets/static/index/head.png'"
							mode="aspectFill"></image>
						<view class="sign-name">
							{{item.nickname}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button shape="circle" @click="gobuy()" v-if="info.had_join == 0"
				color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" type="primary" text="加入组局"></u-button>
			<u-button shape="circle" @click="goToSessionInfo(info.fastim_id)" v-if="info.had_join == 1"
				color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" type="primary" text="聊天"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				info: {}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.postdetails()
		},
		methods: {
			goToSessionInfo(id) {
				this.$navTo.togo('/pages/session-info/session-info', {
					id: id
				})
			},
			gobuy() {
				let token = uni.getStorageSync("token") || '';
				if (token != '') {
					uni.showLoading({
						mask: true
					})
					let params = {
						activity_id: this.id,
					}
					this.$Request({
						method: 'POST',
						url: '/api/user_activity/joinActivity',
						data: params,
						ismsg: true,
					}).then(res => {
						if (res.code == 1) {
							uni.hideLoading()
							this.postdetails()
						}
					})
				}else{
					uni.showModal({
						title: '提示',
						content: '请登录！体验完整功能！',
						confirmText:'去登录',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url:'/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			postdetails() {
				let params = {
					activity_id: this.id,
				}
				this.$Request({
					method: 'POST',
					url: '/api/user_activity/getDetail',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						console.log(this.info)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		.swiper {
			width: 100%;
			height: 430rpx;

			.details-bg {
				width: 100%;
			}
		}

		.btn {
			width: 90%;
			position: fixed;
			bottom: 60rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}

		.box {
			position: relative;
			width: 100%;

			.info-box {
				position: absolute;
				top: -50rpx;
				left: 0;
				right: 0;
				background-color: #ffffff;
				padding: 30rpx 40rpx  160rpx  30rpx;
				border-top-right-radius: 30rpx;
				border-top-left-radius: 30rpx;

				.info-title {
					font-weight: 600;
					font-size: 40rpx;
					color: #2D2D2D;
					line-height: 28rpx;
					margin-top: 20rpx;
				}

				.info-item {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					img {
						width: 32rpx;
						height: 32rpx;
					}

					.item-title {
						font-weight: 400;
						font-size: 28rpx;
						color: #19394A;
						margin-left: 20rpx;
					}

					.item-text {
						width: 75%;
						font-weight: 600;
						font-size: 28rpx;
						color: #19394A;
						margin-left: 20rpx;
					}
				}

				.title {
					margin-top: 40rpx;
					font-weight: 700;
					font-size: 32rpx;
					color: #000000;
				}

				.people {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					image {
						width: 105rpx;
						height: 105rpx;
						border-radius: 50rpx;
					}

					.people-right {
						margin-left: 20rpx;

						.right-top {
							display: flex;
							align-items: center;

							img {
								width: 24rpx;
								height: 24rpx;
							}

							.name {
								font-weight: 500;
								font-size: 28rpx;
								color: #2E314A;
								margin-right: 10rpx;
							}
						}

						.label {
							display: flex;
							align-items: center;
							color: #9799AC;
							font-size: 24rpx;

							.label-text {}

							.position {
								display: flex;
								align-items: center;

								img {
									width: 20rpx;
									height: 20rpx;
									margin: 0 10rpx;
								}
							}
						}
					}
				}

				.sign {
					display: flex;
					flex-wrap: wrap;
					text-align: center;

					.sign-item {
						width: 19%;
						margin-top: 30rpx;
						margin-right: 20rpx;
						image {
							width: 105rpx;
							height: 105rpx;
							border-radius: 50%;
						}

						.sign-name {
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>